<template>
  <div class="toppart">
      <div class="logo fl">
        <a href="#"><img src="../assets/images/logo.png"></a>
      </div>
      <div class="edit1 fl">
        <a class="file" href="#">文件</a>
        <a class="revoke" href="#">撤销</a>
        <a class="recover" href="#">恢复</a>
      </div>
      <div class="edit2 fl">
        <a class="release" href="#">发布</a>
        <a class="download" href="#">下载</a>
      </div>
      <div class="title fl">
        标题 : <div class="inputwrap fr"><input type="text" placeholder="设置作品标题"/></div>
      </div>
      <div class="tips fl">12:00同步</div>
      <div class="help fr">
        <a class="course" href="#">教程</a>
        <a class="service" href="#">客服</a>
      </div>
  </div>
</template>

<script>
    
</script>

<style scoped>
.toppart{position: fixed;top: 0;left: 0;right: 0;height: 54px;background: #22d7bb;}
.toppart a{display:block;}
.toppart .logo{width: 89px;height: 24px;margin: 15px 30px;}
.toppart .edit1{margin-left:20px;}
.toppart .edit1 a{float: left;padding-top: 24px;width: 40px;height: 30px;line-height: 30px;margin:0 12px;color: #fff;font-size: 13px;text-align: center;}
.toppart .edit1 a.file{background: url(../assets/images/ticon1.png) no-repeat center 11px;}
.toppart .edit1 a.revoke{background: url(../assets/images/ticon2.png) no-repeat center 11px;}
.toppart .edit1 a.recover{background: url(../assets/images/ticon3.png) no-repeat center 11px;}
.toppart .edit2{margin-left:30px;}
.toppart .edit2 a{float:left;width:56px;height: 28px;border: 2px solid #fff;color: #fff;border-radius: 30px;font-size: 13px;line-height: 28px;text-align: center;margin: 12px 10px;}
.toppart .title{color: #c2fff6;font-size: 16px;height: 30px;line-height:30px;margin-top:12px;margin-left: 300px;}
.toppart .title input{display: block;width: 200px;height: 28px;border:0;border-bottom: 2px dashed #20bba3;padding: 0;padding-right: 23px;background: url(../assets/images/ticon4.png) no-repeat 205px center;text-indent: 12px;color: #c2fff6;font-size: 16px;}
.toppart .tips{font-size: 14px;color: #fff;margin-left: 220px;height: 24px;line-height: 24px;margin-top: 15px;}
.toppart .help{margin-right: 40px;}
.toppart .help a{float: left;font-size: 15px;color: #fff;height: 24px;margin:15px;}


:-moz-placeholder {color: #c2fff6; opacity:1;}
::-moz-placeholder {color: #c2fff6;opacity:1;}
input:-ms-input-placeholder{color: #c2fff6;opacity:1;}
input::-webkit-input-placeholder{color: #c2fff6;opacity:1;}
</style>

